<template>
  <el-card>
    <div slot="header" class="header" style="padding-top: 8px">
      <div class="category-header">
        <span>销售额类别占比</span>
        <el-radio-group v-model="radio1" size="small">
          <el-radio-button label="全部渠道"></el-radio-button>
          <el-radio-button label="线上"></el-radio-button>
          <el-radio-button label="线下"></el-radio-button>
        </el-radio-group>
      </div>
    </div>
    <div>
      <template>
        <div class="barpic" ref="barpic"></div>
      </template>
    </div>
  </el-card>
</template>

<script>
import * as echarts from 'echarts'
export default {
  data() {
    return {
      radio1: "全部渠道",
    };
  },
  mounted() {
    let mychart = echarts.init(this.$refs.barpic);
    mychart.setOption({
       title:{
    text:'视频',
    subtext:'11',
    top:"center",
    left:"center",
    textStyle:{
        fontSize:12
    }
  },
  tooltip: {
    trigger: 'item'
  },
  series: [
    {
      name: 'Access From',
      type: 'pie',
      radius: ['40%', '70%'],
      avoidLabelOverlap: false,
      itemStyle: {
        borderColor: '#fff',
        borderWidth: 2
      },
      label: {
        show: true,
      },
      labelLine: {
        show: true
      },
      data: [
        { value: 1048, name: 'Search Engine' },
        { value: 735, name: 'Direct' },
        { value: 580, name: 'Email' },
        { value: 484, name: 'Union Ads' },
        { value: 300, name: 'Video Ads' }
      ]
    }
  ]
    })
    //绑定事件
    mychart.on('mouseover',(params)=>{
       const {value,name}=params.data
       mychart.setOption({
        title:{
            text:name,
            subtext:value
        }
       })
    })
  }
};
</script>

<style scoped>
.category-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.header {
  border-bottom: 1px solid #eee;
  margin-bottom: 10px;
}
.barpic{
    width: 100%;
    height: 200px;
}
</style>